<template>
    <div class="app-container">
        <div class="add-row-center-box" style="width: 100%">
            <el-form ref="form" :model="form" inline :rules="rules" label-position="top"
                     class="form-item-column column-2">
                <el-form-item label="选择车间" prop="achievementWorkshop">
                    <el-select v-model="form.achievementWorkshop" size="small" placeholder="请选择选择车间" filterable
                               @change="onWorkshopChange" clearable>
                        <el-option v-for="item in taskStepEnum"
                                   v-show="item.value !== taskStepEnum.news.value && item.value !== taskStepEnum.complete.value"
                                   :value="item.value" :label="item.label"/>
                    </el-select>
                </el-form-item>

                <!--增行表格-->
                <div class="form-table">
                    <el-form-item label="填写业绩" prop="achievementList" style="width: 100%">
                        <label slot="label" class="el-form-item__label">录入业绩
                            <el-button type="text" size="mini" icon="el-icon-plus" @click="onAddRow">增行</el-button>
                        </label>
                        <el-table :data="form.achievementList" v-loading="loading" ref="table" row-key="index">
                            <el-table-column label="日期" prop="achievementDate" width="170">
                                <el-form-item slot-scope="{row, $index}" label="" :rules="rules.achievementDate"
                                              :prop="'achievementList.'+$index+'.achievementDate'">
                                    <el-date-picker v-model="row.achievementDate" type="date" size="small"
                                                    placeholder="选择日期"
                                                    value-format="yyyy-MM-dd" style="width: 100%"/>
                                </el-form-item>
                            </el-table-column>
                            <el-table-column label="姓名" prop="achievementName">
                                <el-form-item slot-scope="{row, $index}" label="" :rules="rules.achievementName"
                                              :prop="'achievementList.'+$index+'.achievementName'">
                                    <el-input v-model="row.achievementName" size="mini" placeholder="请输入姓名"/>
                                </el-form-item>
                            </el-table-column>
                            <el-table-column label="工号" prop="achievementJobno">
                                <el-form-item slot-scope="{row, $index}" label="" :rules="rules.achievementJobno"
                                              :prop="'achievementList.'+$index+'.achievementJobno'">
                                    <el-input v-model="row.achievementJobno" size="mini" placeholder="请输入工号"/>
                                </el-form-item>
                            </el-table-column>

                            <!--订单-->
                            <template v-if="form.achievementWorkshop !== taskStepEnum.plating.value">
                                <el-table-column label="订单（任务编号）" prop="taskNo">
                                    <el-form-item slot-scope="{row, $index}" label="" :rules="rules.taskNo"
                                                  :prop="'achievementList.'+$index+'.taskNo'">
                                        <el-input v-model="row.taskNo" size="mini" placeholder="请输入订单"/>
                                    </el-form-item>
                                </el-table-column>
                            </template>

                            <!--包装-->
                            <template v-if="form.achievementWorkshop === taskStepEnum.packing.value">
                                <el-table-column label="货号" prop="goodsNo">
                                    <el-form-item slot-scope="{row, $index}" label="" :rules="rules.goodsNo"
                                                  :prop="'achievementList.'+$index+'.goodsNo'">
                                        <el-input v-model="row.goodsNo" size="mini" placeholder="请输入货号"/>
                                    </el-form-item>
                                </el-table-column>
                                <el-table-column label="品名规格" prop="nameSku">
                                    <el-form-item slot-scope="{row, $index}" label="" :rules="rules.nameSku"
                                                  :prop="'achievementList.'+$index+'.nameSku'">
                                        <el-input v-model="row.nameSku" size="mini" placeholder="请输入品名规格"/>
                                    </el-form-item>
                                </el-table-column>
                                <el-table-column label="包装方式" prop="packingType">
                                    <el-form-item slot-scope="{row, $index}" label="" :rules="rules.packingType"
                                                  :prop="'achievementList.'+$index+'.packingType'">
                                        <el-input v-model="row.packingType" size="mini" placeholder="请输入包装方式"/>
                                    </el-form-item>
                                </el-table-column>
                                <el-table-column label="数量（套）" prop="achievementNum">
                                    <el-form-item slot-scope="{row, $index}" label="" :rules="rules.num"
                                                  :prop="'achievementList.'+$index+'.achievementNum'">
                                        <el-input v-model="row.achievementNum" size="mini" placeholder="请输入数量"/>
                                    </el-form-item>
                                </el-table-column>
                            </template>
                            <!--插球-->
                            <template v-if="form.achievementWorkshop === taskStepEnum.ball.value">
                                <el-table-column label="名称" prop="productName">
                                    <el-form-item slot-scope="{row, $index}" label="" :rules="rules.productName"
                                                  :prop="'achievementList.'+$index+'.productName'">
                                        <el-input v-model="row.productName" size="mini" placeholder="请输入名称"/>
                                    </el-form-item>
                                </el-table-column>
                                <el-table-column label="插条" prop="achievementCutting">
                                    <el-form-item slot-scope="{row, $index}" label="" :rules="rules.achievementCutting"
                                                  :prop="'achievementList.'+$index+'.achievementCutting'">
                                        <el-input v-model="row.achievementCutting" size="mini" placeholder="请输入插条"/>
                                    </el-form-item>
                                </el-table-column>
                                <el-table-column label="条数" prop="achievementNum">
                                    <el-form-item slot-scope="{row, $index}" label="" :rules="rules.num"
                                                  :prop="'achievementList.'+$index+'.achievementNum'">
                                        <el-input v-model="row.achievementNum" size="mini" placeholder="请输入条数"/>
                                    </el-form-item>
                                </el-table-column>
                                <el-table-column label="数量" prop="achievementNum">
                                    <el-form-item slot-scope="{row, $index}" label="" :rules="rules.num"
                                                  :prop="'achievementList.'+$index+'.achievementNum'">
                                        <el-input v-model="row.achievementNum" size="mini" placeholder="请输入数量"/>
                                    </el-form-item>
                                </el-table-column>
                            </template>
                            <!--彩绘-->
                            <template v-if="form.achievementWorkshop === taskStepEnum.painting.value">
                                <el-table-column label="名称" prop="productName">
                                    <el-form-item slot-scope="{row, $index}" label="" :rules="rules.productName"
                                                  :prop="'achievementList.'+$index+'.productName'">
                                        <el-input v-model="row.productName" size="mini" placeholder="请输入名称"/>
                                    </el-form-item>
                                </el-table-column>
                                <el-table-column label="规格" prop="nameSku">
                                    <el-form-item slot-scope="{row, $index}" label="" :rules="rules.nameSku"
                                                  :prop="'achievementList.'+$index+'.nameSku'">
                                        <el-input v-model="row.nameSku" size="mini" placeholder="请输入规格"/>
                                    </el-form-item>
                                </el-table-column>
                                <el-table-column label="颜色" prop="achievementColor">
                                    <el-form-item slot-scope="{row, $index}" label="" :rules="rules.achievementColor"
                                                  :prop="'achievementList.'+$index+'.achievementColor'">
                                        <el-input v-model.number="row.achievementColor" size="mini"
                                                  placeholder="请输入颜色"/>
                                    </el-form-item>
                                </el-table-column>
                                <el-table-column label="合计数量" prop="achievementTotal">
                                    <el-form-item slot-scope="{row, $index}" label="" :rules="rules.num"
                                                  :prop="'achievementList.'+$index+'.achievementTotal'">
                                        <el-input v-model.number="row.achievementTotal" size="mini"
                                                  placeholder="请输入合计数量"/>
                                    </el-form-item>
                                </el-table-column>
                            </template>
                            <!--电镀-->
                            <template v-if="form.achievementWorkshop === taskStepEnum.plating.value">
                                <el-table-column label="微机数量" prop="microcomputerCount">
                                    <el-form-item slot-scope="{row, $index}" label="" :rules="rules.num"
                                                  :prop="'achievementList.'+$index+'.microcomputerCount'">
                                        <el-input v-model="row.microcomputerCount" size="mini" placeholder="请输入微机数量"/>
                                    </el-form-item>
                                </el-table-column>
                                <el-table-column label="待机数量" prop="machineCount">
                                    <el-form-item slot-scope="{row, $index}" label="" :rules="rules.num"
                                                  :prop="'achievementList.'+$index+'.machineCount'">
                                        <el-input v-model.number="row.machineCount" size="mini" placeholder="请输入待机数量"/>
                                    </el-form-item>
                                </el-table-column>
                            </template>
                            <!--单价-->
                            <el-table-column label="单价" prop="achievementPrice">
                                <el-form-item slot-scope="{row, $index}" label="" :rules="rules.price"
                                              :prop="'achievementList.'+$index+'.achievementPrice'">
                                    <el-input v-model.number="row.achievementPrice" size="mini" placeholder="请输入单价"/>
                                </el-form-item>
                            </el-table-column>
                            <!--包装-->
                            <template v-if="form.achievementWorkshop !== taskStepEnum.plating.value">
                                <el-table-column label="金额" prop="achievementMoney">
                                    <el-form-item slot-scope="{row, $index}" label="" :rules="rules.achievementPrice"
                                                  :prop="'achievementList.'+$index+'.achievementMoney'">
                                        <el-input v-model="row.achievementMoney" size="mini" placeholder="请输入金额"/>
                                    </el-form-item>
                                </el-table-column>
                            </template>
                            <el-table-column label="备注" prop="achievementRemark">
                                <el-form-item slot-scope="{row, $index}" label="" :rules="rules.achievementRemark"
                                              :prop="'achievementList.'+$index+'.achievementRemark'">
                                    <el-input v-model="row.achievementRemark" size="mini" placeholder="请输入备注"/>
                                </el-form-item>
                            </el-table-column>

                            <el-table-column width="50" class-name="small-padding">
                                <el-button slot-scope="{row, $index}" size="mini" type="text"
                                           @click="onDeleteNeed($index)">
                                    删除
                                </el-button>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </div>
            </el-form>

            <div class="footer">
                <el-button size="small" @click="cancel">取 消</el-button>
                <el-button type="primary" size="small" @click="submitForm">确 定</el-button>
            </div>
        </div>
    </div>

</template>

<script>
import {responseEnum} from "../../../../const/const";
import {FLOAT_NUMBER, IS_INTEGER} from "../../../../utils/validate";
import _ from "lodash";
import {taskStepEnum} from "../../../../const/const";
import {addAchievement} from "../api";

export default {
    name: 'addAchievement',
    data() {
        return {
            taskStepEnum,
            // loading
            loading: false,
            form: {
                achievementWorkshop: '',  // 车间
                taskId: null, // 任务id
                achievementList: [{
                    achievementWorkshop: null, // 车间
                    achievementDate: null, // 日期
                    achievementName: null, // 姓名
                    achievementJobno: null, // 工号
                    taskNo: null, // 订单
                    goodsNo: null, // 货号
                    nameSku: null, // 品名规格
                    packingType: null, // 包装方式
                    achievementNum: null, // 数量
                    achievementPrice: null, // 单价
                    achievementMoney: null, // 金额
                    achievementRemark: null, // 备注
                    productName: null, // 名称
                    achievementCutting: null, // 插条
                    achievementColor: null, // 颜色
                    achievementTotal: null, // 合计数量
                    microcomputerCount: null, // 微机数量
                    machineCount: null, // 待机数量
                }]
            },
            // 校验
            rules: {
                achievementWorkshop: [{required: true, message: '请选择选择车间'}],
                achievementDate: [{required: true, message: '请选择日期'}],
                achievementName: [{required: true, message: '请输入姓名'}],
                achievementJobno: [{required: true, message: '请输入工号'}],
                num: [{required: false, pattern: IS_INTEGER, message: '请输入正整数'}],
                price: [{required: false, pattern: FLOAT_NUMBER, message: '请输入数字类型'}],
            },
        }
    },
    created() {
        this.form.taskId = this.$route.query.taskId;
    },
    methods: {
        /**
         * 切换车间
         */
        onWorkshopChange() {
            this.form.achievementList.forEach(item => {
                Object.keys(item).forEach(key => {
                    if (key !== 'achievementDate' && key !== 'achievementName' && key !== 'achievementJobno' && key !== 'achievementRemark') {
                        item[key] = null;
                    }
                })
            })
        },
        /**
         * 增行
         */
        onAddRow() {
            const row = _.cloneDeep(this.$options.data().form.achievementList[0]);
            this.form.achievementList.push(row);
        },
        /**
         * 删除行
         */
        onDeleteNeed(index) {
            this.form.achievementList.splice(index, 1)
        },
        /**
         * 提交表单
         */
        submitForm() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    const loading = this.$loading({lock: true});
                    this.form.achievementList.forEach(item => {
                        item.achievementWorkshop = this.form.achievementWorkshop;
                    })
                    addAchievement(this.form).then(res => {
                        if (res.code === responseEnum.success) {
                            this.$message.success('录入业绩成功');
                            this.$tab.closeOpenPage();
                            this.$router.replace({path: '/ProduceTask/detail', query: {...this.$route.query}})
                        } else {
                            this.$message.error(res.msg);
                        }
                    }).finally(() => loading.close())
                }
            })
        },
        /*取消、关闭*/
        cancel() {
            this.$tab.closeOpenPage();
            this.$router.back()
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
